<!--
 * @description: 剧本创作
 * @fileName: index
 * @author: 17076
 * @date: 2025/2/19-上午9:28
 * @version: V1.0.0
-->
<template>
  <div class="play-content">
    <base-card title="开始创作">
      <el-row :gutter="20" :style="{ height: $baseTableHeight(-120) + 'px', padding: '10px' }">
        <el-col :span="8">
          <div class="flex-row square-item" @click="handleItem(2)">
            <div class="flex-column" style="flex: 1">
              <p style="font-weight: bold;font-size: 18px">已有剧本快捷导入</p>
              <p>导入已有剧本</p>
              <p>→</p>
            </div>
            <img src="@/assets/write/AI-square.png"/>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="flex-row square-item" @click="handleItem(1)">
            <div class="flex-column" style="flex: 1">
              <p style="font-weight: bold;font-size: 18px">AI 剧本智能创作</p>
              <p>本阶段暂不接入</p>
              <p>→</p>
            </div>
            <img src="@/assets/write/play_import.png"/>
          </div>
        </el-col>
      </el-row>
    </base-card>
  </div>
</template>

<script>
import ScreenWriting from './components/ScreenWriting.vue'
export default {
  name: 'Index',
  components: { ScreenWriting },
  data() {
    return {
      activeStep: 1
    }
  },
  methods: {
    handleItem(val) {
      if (val === 1) {
        this.$baseMessage.warning('敬请期待')
        return
      }
      this.$router.push({
        path: '/skit-creation'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.play-content {
  height: 100%;
  .square-item {
    background: #272C36;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: 8px;
      background: linear-gradient(90deg, #2C4BFF, #04FFE0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      padding: 1px;
    }
    img {
      width: 50%;
      height: 100%;
      margin-left: 10px;
    }
    &:hover {
      transform: scale(1.02);
    }
  }
}
</style>
